<template>
    <el-form ref="dialogForm" label-width="100px" label-position="left">
        <el-row>
            <labelName :title="'地区数据:'"></labelName>
            <el-col :span="20" :offset="2">
                <el-form-item label="片区权限">
                    <el-select v-model="contentValue.area" placeholder="请选择" class="custom-select" @change="areachange"
                        :loading="areaLoading" multiple filterable clearable collapse-tags collapse-tags-tooltip
                        :max-collapse-tags="3">
                        <el-option v-for="item in areaList" :key="item.id" :label="item.label"
                            :value="item.label"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="20" :offset="2">
                <el-form-item label="省份权限">
                    <el-select v-model="contentValue.province" placeholder="请选择" class="custom-select"
                        @change="provincechange" :loading="provinceLoading" multiple filterable clearable
                        @visible-change="provinceVisibleChange" collapse-tags collapse-tags-tooltip
                        :max-collapse-tags="3">
                        <el-checkbox v-model="provinceAllCheck" label="全选" size="large" style="margin-left: 20px;"
                            @change="provinceAllCheckChange" />
                        <el-option v-for="item in provinceList" :key="item.code" :label="item.province"
                            :value="item.province"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="20" :offset="2">
                <el-form-item label="城市权限">
                    <el-select v-model="contentValue.city" placeholder="请选择" class="custom-select" @change="citychange"
                        :loading="cityLoading" multiple filterable clearable @visible-change="cityVisibleChange"
                        collapse-tags collapse-tags-tooltip :max-collapse-tags="3">
                        <el-checkbox v-model="cityAllCheck" label="全选" size="large" style="margin-left: 20px;"
                            @change="cityAllCheckChange" />
                        <el-option v-for="item in cityList" :key="item.code" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <labelName :title="'客户数据:'"></labelName>
            <el-col :span="20" :offset="2">
                <el-form-item label="客户级别">
                    <el-select v-model="contentValue.custom" placeholder="请选择" class="custom-select" multiple clearable
                        collapse-tags collapse-tags-tooltip :max-collapse-tags="3">
                        <el-option label="全选/不限制" :value="'全选/不限制'"></el-option>
                        <el-option label="备案VIP" :value="'备案VIP'"></el-option>
                        <el-option label="备案二级" :value="'备案二级'"></el-option>
                        <el-option label="备案三级" :value="'备案三级'"></el-option>
                        <el-option label="终端" :value="'终端'"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <!-- <labelName :title="'场景数据:'"></labelName>
            <el-col :span="20" :offset="2">
                <el-form-item label="业务场景">
                    <el-select v-model="contentValue.businessScenario" placeholder="请选择" class="custom-select">
                        <el-option label="全选/不限制" :value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-col> -->
        </el-row>
    </el-form>
</template>
<script>
import labelName from './labelname.vue'

export default {
    emits: ['success', 'closed'],
    props: {
        modelValue: {
            type: Object,
            default: () => ({})
        },
        isReadonly: {
            type: Boolean,
            default: false
        }
    },
    components: {
        labelName
    },
    data() {
        return {
            form: {
                id: 0,
                area: '',
                province: '',
                city: '',
                custom: ''
                // businessScenario: ''
            },
            areaList: [], //片区列表
            provinceList: [],
            cityList: [],

            areaLoading: false,
            provinceLoading: false,
            cityLoading: false,
            isIniting: false,
            areaLoaded: false,
            rules: {
                area: [{ required: true, message: '请选择片区权限' }],
                province: [{ required: true, message: '请选择省份权限' }],
                city: [{ required: true, message: '请选择城市权限' }],
                custom: [{ required: true, message: '请选择客户级别' }]
            },
            stopInit: false,
            loadProvince: false,
            loadCity: false,
            provinceAllCheck: false,
            cityAllCheck: false

        }
    },
    mounted() { },
    created() {
        this.getAreaArea()
    },
    watch: {
        async 'modelValue.area'(newVal) {
            if (newVal) {
                this.areaLoaded = true
                this.initProvinceAndCity()
                await this.getChinaTreeByArea(this.modelValue.area)
                this.getCityList(this.modelValue.province)

            }
        },
        'modelValue.province': {
            handler() {
                if (!this.stopInit) {
                    this.initProvinceAndCity()
                }
            },
            immediate: true
        }
    },
    computed: {
        contentValue: {
            get() {
                this.initProvinceAllCheck(this.provinceList, this.modelValue.province)
                this.initCityAllCheck(this.cityList, this.modelValue.city)
                return this.modelValue
            },
            set(value) {
                this.$emit('update:modelValue', value)
            }
        },
        // selectAllProvinceOptionVisible() {
        //     return !this.contentValue.province.includes('all');
        // }
    },
    methods: {
        close() {
            this.$emit('closed')
        },
        async open(data) {
        },
        async submit() { },
        //获取片区列表
        async getAreaArea() {
            this.areaLoading = true
            let res = await this.$API.emp.getArea.get()
            this.areaLoading = false
            if (res && res.code == 0) {
                this.areaList = res.data
            }
        },
        //通过片区获取对应省市区
        async getChinaTreeByArea(data) {
            // let list = []
            if (data && data.length > 0) {
                var res = await this.$API.emp.getChinaTreeByAreaList.post({ data })
                if (res.code == '0') {
                    this.provinceList = res.data
                }
            }
        },
        async areachange(values) {
            this.contentValue.province = []
            this.contentValue.city = []
            this.provinceList = []
            this.cityList = []

            if (values.length > 0) {
                this.loadProvince = true
            } else {
                this.loadProvince = false
            }
        },
        provincechange(values) {
            this.contentValue.city = []
            this.cityList = []
            this.stopInit = true

            if (values.length > 0) {
                this.loadCity = true
            } else {
                this.loadCity = false
            }
            this.initProvinceAllCheck(this.cityList, values)

        },
        citychange(values) {
            this.initCityAllCheck(this.cityList, values)
        },
        getCityList(values) {
            this.cityList = []
            if (values.length > 0) {
                values.forEach(value => {
                    let obj = this.provinceList.find((item) => item.province == value)
                    if (obj) {
                        this.cityList = [...this.cityList, ...obj.cities]
                    }
                })
            }
        },

        initProvinceAndCity() {
            if (!this.areaLoaded || !this.modelValue.province || this.provinceList.length == 0) return
            // console.log(this.provinceList)
            // console.log(this.modelValue.province)
            this.cityList = []

            this.provinceList.filter((item) => this.modelValue.province.includes(item.province)).map((item) => {
                this.cityList = [...this.cityList, ...item.cities]
            })
        },
        validate() {
            // if (!this.contentValue.area || this.contentValue.area.length <= 0) {
            //     return "请选择片区！"
            // } else if (!this.contentValue.province || this.contentValue.province.length <= 0) {
            //     return "请选择省份！"
            // } else if (!this.contentValue.city || this.contentValue.city.length <= 0) {
            //     return "请选择城市！"
            // } else if (!this.contentValue.custom || this.contentValue.custom.length <= 0) {
            //     return "请选择客户级别！"
            // }
            return null
        },
        cityVisibleChange(ispoen) {
            this.cityLoading = true
            if (ispoen && this.loadCity) {
                this.getCityList(this.contentValue.province)
                this.loadCity = false
            }
            this.cityLoading = false
        },
        async provinceVisibleChange(ispoen) {
            this.provinceLoading = true
            if (ispoen && this.loadProvince) {
                await this.getChinaTreeByArea(this.contentValue.area)
                this.loadProvince = false

            }
            this.provinceLoading = false
        },
        provinceAllCheckChange(allCheck) {
            if (allCheck) {
                //勾选全选
                this.contentValue.province = this.provinceList.map((item) => {
                    return item.province
                })
                this.getCityList(this.contentValue.province)

            } else {
                // 未勾选全选
                this.contentValue.province = []
                this.contentValue.city = []
                this.cityList = []
            }
        },
        cityAllCheckChange(allCheck) {
            if (allCheck) {
                //勾选全选
                this.contentValue.city = this.cityList.map((item) => {
                    return item.name
                })
            } else {
                // 未勾选全选
                this.contentValue.city = []
            }
        },
        initProvinceAllCheck(list, values) {
            if (list.length > values.length) {
                this.provinceAllCheck = false
            } else if (list.length == values.length) {
                this.provinceAllCheck = true
            }
        },
        initCityAllCheck(list, values) {
            if (list.length > values.length) {
                this.cityAllCheck = false
            } else if (list.length == values.length) {
                this.cityAllCheck = true
            }
        }
    }
}
</script>

<style scoped>
/* 设置选择器的宽度和圆角 */
.custom-select {
    width: 100%;
    border-radius: 8px;
}

/* 固定全选复选框样式 */
/* .province-select-popper .fixed-checkbox {
    position: sticky;
    top: 0;
    z-index: 99;
    padding: 8px 20px;
    width: 50%;
} */
</style>
